<template>
    <template v-for="item in data" :key="item.menuId">
        <el-menu-item v-if="item.menuType === 'M' && item.children === null" :index="item.path">
            <template #title>
                <SvgIcon class="menu-title" :name="item.icon" color="#f50"></SvgIcon>
                <span>{{ item.menuName }}</span>
            </template>
        </el-menu-item>
        <el-sub-menu v-if="item.children!== null || item.path==null" :index="item.ename">
            <template #title>
                <SvgIcon class="menu-title" :name="item.icon" color="#f50"></SvgIcon>
                <span>{{ item.menuName }}</span>
            </template>
            <MenuItem :data="item.children"></MenuItem>
        </el-sub-menu>
    </template>
</template>

<script setup>
import SvgIcon from '../svgIcon/SvgIcon.vue';
// 定义数据属性
defineProps(["data"])
</script>

<style scoped>
.menu-title {
    padding-right: 10px;
}
</style>
